<template>
  <div class="link-input">
    <label>{{ lable }}</label>
    <input :type="type" :name="name" :placeholder="placeholder" />
  </div>
</template>

<script>
export default {
  props: {
    lable: { type: String, default: '' },
    type: { type: String, default: 'text' },
    placeholder: { type: String, default: '' },
    name: { type: String, default: '' }
  }
}
</script>

<style scoped>
.link-input {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.link-input label {
  margin-right: 10px;
}
.link-input input {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #999;
  outline: none;
  cursor: pointer;
  flex: 1;
}
.link-input input:focus {
  border-color: #198cff;
}
</style>
